<template>
  <div class="auto-remark-main">
    <div class="nav-back-header">
      <div class="back-title">
        <div class="back-button">
          <img class="back-cover" src="@/assets/images/arrow-left.png" @click="onNavigationBack()"/>
        </div>
        <strong>自动备注、发消息、拉群</strong>
      </div>
    </div>
    <el-form :model="form" ref="form" size="small" class="send-setting-form" :inline="true">
      <div class="page-main">
        <div class="remark-card">
          <div class="title">
            <el-form-item label="自动备注" prop="name" class="spacing">
              <el-switch v-model="form.autoRemark"/>
            </el-form-item>
          </div>
          <div class="content" v-show="form.autoRemark">
            <div class="field">
              <label>处理规则：</label>
              <div class="rule-box">
                <div class="tips">打招呼时，手机号对应的微信</div>
                <div class="rule-content">
                  <div>若为新好友：优先执行此处设置的自动备注，此处未设置则执行
                    <router-link to="/customerOperationsMgt/newUserOperationsMgt/newUserOperationsList">新客户运营</router-link>
                    设置的自动备注
                  </div>
                  <div>
                    <el-form-item label="若已是好友：" prop="name">
                      <el-radio-group v-model="form.oldFriendRenewRemark">
                        <el-radio :label="0">不更新备注</el-radio>
                        <el-radio :label="1">按照此处设置更新备注</el-radio>
                      </el-radio-group>
                    </el-form-item>

                  </div>
                </div>
              </div>
            </div>
            <div class="field">
              <label>备注内容：</label>
              <div class="rule-box">
                <el-form-item prop="name">
                  <EditorPro ref="editorProntent" :toolTags="tags" hideEmoji hideImageBtn hideVideoBtn hideImageText hideMini havecopy :options="{ placeholder: '请输入内容'}"/>
                </el-form-item>
              </div>
            </div>
          </div>

        </div>
        <div class="remark-card">
          <div class="title">
            <label>自动发消息</label>
          </div>
          <div class="content">
            <div class="field">
              <label>处理规则：</label>
              <div class="rule-box">
                <div class="tips">打招呼时，手机号对应的微信</div>
                <div class="rule-content">
                  <div>若为新好友：按照
                    <router-link to="/customerOperationsMgt/newUserOperationsMgt/newUserOperationsList">新客户运营</router-link>
                    内设置的发消息
                  </div>
                  <div>
                    若已是好友：
                    <el-radio-group v-model="form.oldFriendAutoMsg">
                      <el-radio :label="0">不发消息</el-radio>
                      <el-radio :label="1">发消息、拉群</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
            </div>
            <div class="field" v-if="form.oldFriendAutoMsg==1">
              <label>自动发送：</label>
              <div class="rule-box">
                <el-form-item prop="name">
                  <material-content v-model="form.msgList" ref="material" :hasTime="true"/>
                </el-form-item>
              </div>
            </div>
            <div class="field" v-show="form.oldFriendAutoMsg==1">
              <label>自动拉群：</label>
              <div class="rule-box">
                <el-form-item prop="name" class="autoDiv">
                  <el-switch v-model="form.oldFriendAutoAddgroup" style="margin-right: 10px"></el-switch>
                  <template v-if="form.oldFriendAutoAddgroup">
                    已开启
                  </template>
                  <template v-else>
                    已关闭
                  </template>

                  <!--                ,<el-button type="text">拉群设置</el-button>-->
                  <!--                <div class="flexDiv">-->
                  <!--                  <el-radio-group>-->
                  <!--                    <el-radio-button label="1">拉人中</el-radio-button>-->
                  <!--                    <el-radio-button label="2">递补中</el-radio-button>-->
                  <!--                    <el-radio-button label="3">群已满</el-radio-button>-->
                  <!--                  </el-radio-group>-->
                  <!--                  <div style="width:230px">-->
                  <!--                    <WeChat-->
                  <!--                      :options="options"-->
                  <!--                      @getValue="getValue"-->
                  <!--                      inputWidth="230px"-->
                  <!--                      :placeholder="`全部企微号`"-->
                  <!--                    ></WeChat>-->
                  <!--                  </div>-->

                  <!--                </div>-->

                </el-form-item>
                <!--              <el-table :data="tableDataList"-->
                <!--                        ref="autoRemark"-->
                <!--                        class="tableHightClass"-->
                <!--              >-->
                <!--                <el-table-column :label="item.label" align="center" v-for="(item,index) in tableColumns" :prop="item.key" v-if="item.visible?item.visible:true" :min-width="item.minWidth?item.minWidth:``" :fixed="item.fixed?item.fixed:false" :show-overflow-tooltip="true">-->
                <!--                  &lt;!&ndash;用于表格自定义&ndash;&gt;-->
                <!--                  <template slot-scope="scope">-->
                <!--                    &lt;!&ndash;状态&ndash;&gt;-->
                <!--                    <div v-if="item.key=='userStatus'" class="status">-->
                <!--                      <span :class="scope.row.userStatus==0? `color-green`:`color-red`">{{ scope.row.userStatus == 0 ? `启用` : `暂停` }}</span>-->
                <!--                    </div>-->
                <!--                    <div v-else>{{ scope.row[item.key] }}</div>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <!--              </el-table>-->
                <!--              <pagination-->
                <!--                v-show="total>10"-->
                <!--                :total="total"-->
                <!--                :page.sync="queryParams.pageNum"-->
                <!--                :limit.sync="queryParams.pageSize"-->
                <!--                @pagination="getList"-->
                <!--                ></pagination>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <div class="remark-footer">
      <el-button size="small">取消</el-button>
      <el-button size="small" type="primary" @click="onSubmit('form')">保存修改</el-button>
    </div>
    <groupSettings v-if="showGroupSettings" :visableIf.sync="showGroupSettings"/>
  </div>
</template>
<script>

import EditorPro from "@/components/EditorPro/index.vue";
import MaterialContent from "@/components/MaterialContent/index.vue";
import WeChat from "@/views/components/WeChat.vue";
import groupSettings from "./groupSettings.vue";
import AutoSettingDialog from "@/views/hook/addFriend/components/AutoSettingDialog.vue";
import {reqGetAutoMsgConfig, addAutoMsgConfig, editAutoMsgConfig,} from '@/api/addFriend/index'
import {mapGetters} from "vuex";

export default {
  components: {AutoSettingDialog, WeChat, MaterialContent, EditorPro, groupSettings},
  data() {
    return {
      showGroupSettings: false,
      options: [{
        value: 1,
        label: '小红',
        WeChatNum: 2,
        WeChatName: '智行',
      }, {
        value: 2,
        label: '小军',
        WeChatNum: 1,
        WeChatName: '锐行',
      }, {
        value: 3,
        label: '小李',
        WeChatNum: 1,
        WeChatName: '锐行',
      }],
      tags:[
        {text:'添加日期', label:'adddate'},
        {text:'微信昵称', label:'nickname'},
        {text:'性别', label:'gender'},
        {text:'手机号', label:'mobile'},
      ],
     // ['微信昵称','性别','添加日期','手机号']
      form: {
        corpId:this.$route.query.corpId,
        autoRemark: false,//是否自动备注
        oldFriendRenewRemark: 0,//原有好友是否更新备注
        friendRemarkPattern: null,//备注模版
        oldFriendAutoMsg: 0,//原有好友发消息拉群
        oldFriendAutoAddgroup: false,//
        msgList: [],//消息列表
        friendRemarkPatternHtml: null,
      },
      dialogType: 'add',
      queryParams: {
        pageSize: 10,
        pageNum: 1,

      },
      tableDataList: [],//表格数据
      total: 8,// 表格的总条数
      tableColumns: [
        {key: 'id', label: `群名称`, visible: true, minWidth: 70},
        {key: 'userName', label: `状态`, visible: true, minWidth: 60},
        {key: 'userPhonenumber', label: `已发邀请人数`, visible: true, minWidth: 100},
        {key: 'u_id', label: `操作`, visible: true, minWidth: 80},
        {key: 'u_id', label: `排序`, visible: true, minWidth: 50},
      ],
      content: '',
    }
  },
  computed: {
    // 使用对象展开运算符将此getter映射到局部计算属性
    ...mapGetters([
      'enterpriseId' // 假设这是你想要监听的getter的名字
    ]),
  },
  mounted() {
      this.getGetAutoMsgConfig();

  },
  methods: {
    getContent() {
      // 获取所有的p元素
      let htmlText = this.$refs.editorProntent.noticeContent;
      if (htmlText) {
        const reg = /\<span class="edit-tag">.*?\<\/span>/g;
        const prefix = '<span class="edit-tag">'
        const end = '</span>'
        htmlText.match(reg).forEach(item => {
          const text = `##${item.replace(prefix, '').replace(end, '').trim()}##`
          htmlText = htmlText.replace(item, text)
        })
        //  nickname gender adddate mobile
        htmlText = htmlText.replace(/(.*)<\/p>/g, '$1')
        htmlText = htmlText.replaceAll('</p>', '\n');
        htmlText = htmlText.replaceAll(/<.*?>/g, '');
        htmlText = htmlText.replaceAll('##添加日期##', '##adddate##');
        htmlText = htmlText.replaceAll('##微信昵称##', '##nickname##');
        htmlText = htmlText.replaceAll('##性别##', '##gender##');
        htmlText = htmlText.replaceAll('##手机号##', '##mobile##');
        console.warn('富文本内容--', htmlText);
        return htmlText;
      } else {
        return '';
      }


    },
    getGetAutoMsgConfig() {
      reqGetAutoMsgConfig(this.$route.query.corpId).then(res => {
        console.log('获取配置----', res);
        if (!res.data) {
          this.dialogType = 'add'
        } else {
          this.dialogType = 'edit';
          this.form = res.data;
          this.form.autoRemark = this.form.autoRemark == 1 ? true : false;
          this.form.oldFriendAutoAddgroup = this.form.oldFriendAutoAddgroup == 1 ? true : false;
          this.$refs.editorProntent.noticeContent = decodeURIComponent(atob(this.form.friendRemarkPatternHtml));
          console.log(99999,this.$refs.material,this.form.oldFriendAutoMsg);
          if (this.form.msgList && this.form.msgList.length > 0) {
           // this.$refs.material.messageList = [];
            let list=[]
            this.form.msgList.forEach((item, index) => {
              let obj = {
                until: item.delayUnit,
                timenum: item.delayNumber,
                contentType: item.contentType,
                contentJson: item.contentJson,
                contentOrderIndex: item.contentOrderIndex,
                type:item.contentType,
              }
              list.push(obj);
            })
            this.form.msgList=list
            console.log('22222----', this.form.msgList);
          }
          delete this.form.corpName;
          delete this.form.sysUserId;
          delete this.form.clientUserId;
        }
      })
    },
    // getList() {
    //   this.tableDataList = []
    //   this.loading = true
    //   // reqCustomerList(this.queryParams).then(res => {
    //   //   this.tableDataList = res.rows;
    //   //   this.total = res.total;
    //   //   this.loading = false
    //   //
    //   // })
    // },
    // //搜索
    // handleQuery() {
    //   this.queryParams.pageSize = 10;
    //   this.queryParams.pageNum = 1;
    //   this.getList()
    // },
    // getValue(obj) {
    //   console.log('获取行', obj);
    // },
    onNavigationBack() {
      this.$router.go(-1);
    },
    async onSubmit(formName) {
      //提交的代码
      this.form.friendRemarkPattern = await this.getContent();
      this.form.friendRemarkPatternHtml = btoa(encodeURIComponent(this.$refs.editorProntent.noticeContent));
      if (this.$refs.material.messageList && this.$refs.material.messageList.length > 0) {
        this.form.msgList=[];
        console.log(' this.$refs.material.messageList', this.$refs.material.messageList);
        this.$refs.material.messageList.forEach((item,index)=>{
          let obj={
            delayUnit:item.until,
            delayNumber:item.timenum,
            contentType:item.contentType,
            contentJson:item.contentJson,
            contentOrderIndex:item.contentOrderIndex,
          }
          this.form.msgList.push(obj);
        })
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.autoRemark = this.form.autoRemark ? 1 : 0;
          this.form.oldFriendAutoAddgroup = this.form.oldFriendAutoAddgroup ? 1 : 0;
          let url = '';
          if (this.dialogType == 'add') {
            //添加
          //  this.form.corpId = this.$route.query.corpId;
            url = addAutoMsgConfig;

          } else {
            //编辑
            url = editAutoMsgConfig;
          }
          let form = JSON.parse(JSON.stringify(this.form));
          url(form).then(res => {
            this.$modal.msgSuccess('操作成功！');
            this.$router.push({
              path:'/hook/add-friend',
            })
          })

        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
  },
}
</script>
<style lang="scss" scoped>
.auto-remark-main {
  .nav-back-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 8;
    height: 46px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;

    .back-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;

      .back-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-right: 12px;
        border: none;
        width: 24px;
        height: 24px;
        background: #4b5a95;
        border-radius: 12px;
        cursor: pointer;

        .back-cover {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .page-main {
    width: 1000px;
    color: rgba(0, 0, 0, .85);
    margin: 12px auto 68px;
    height: calc(100vh - 180px);
    overflow-y: auto;

    .remark-card {
      border: 1px solid #e9e9e9;
      background: #fff;
      margin-bottom: 12px;

      .title {
        padding: 12px 16px;
        font-weight: 600;
        color: rgba(0, 0, 0, .85);
        display: flex;
        align-items: center;
        grid-gap: 8px;
        gap: 8px;
        font-size: 14px;
        font-weight: 400;
      }

      .content {
        border-top: 1px solid #e9e9e9;
        padding: 20px;

        .field {
          display: flex;
          align-items: flex-start;
          grid-gap: 8px;
          gap: 8px;
          font-size: 14px;
          line-height: 22px;
          margin-bottom: 10px;

          label {
            width: 70px;
            white-space: nowrap;
          }
        }

        .rule-box {
          flex: 1;

          .tips {
            font-size: 14px;
            line-height: 22px;
            color: rgba(0, 0, 0, .45);
          }

          .rule-content {
            margin-top: 8px;

            > div {
              padding: 12px;
              font-size: 14px;
              line-height: 22px;
              border: 1px solid #e9e9e9;

              &:not(:first-child) {
                border-top: none;
              }

              a {
                color: #3070ff;
              }
            }
          }
        }
      }
    }
  }

  .remark-footer {
    padding: 12px 16px;
    background: #fff;
    box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, .05);
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    grid-gap: 8px;
    gap: 8px;
  }
}

::v-deep .el-form-item {
  display: flex;

  .el-form-item__content {
    flex: 1;
  }
}

::v-deep .spacing {
  margin-bottom: 0px !important;
}

.flexDiv {
  display: flex;
  width: 100%;
  justify-content: flex-end;

  .el-radio-group {
    display: flex;
    margin-right: 15px;
  }
}

::v-deep .autoDiv {
  display: flex;

  .el-form-item__content {
    display: flex;
    flex: 1;
    white-space: nowrap;
    align-items: center;
  }
}
</style>
